const apiService = require('../../../utils/yxqzutil');
const app = getApp();
const urlProductList = app.globalData.urlProductList;
const urlWechatUserEdit = app.globalData.urlWechatUserEdit;
const urlProductEdit = app.globalData.urlProductEdit;
const urlRecordsAdd = app.globalData.urlRecordsAdd;
const userInfo = wx.getStorageSync("userInfo") || {}; // 获取当前本地存储
Component({
  properties: {
    userList: {
      type: Array,
      value: [],
    },
    iconList: {
      type: Array,
      value: [],
    },
    exchangeList: {
      type: Array,
      value: [],
    },
  },

  data: {
    topUsers: [],
    otherUsers: [],
    sortedIconList: [],
    sortedexchangeList: [],
    isCardVisible: false, // 控制卡片显示/隐藏
    selectedItem: null, // 当前选中的图标
    currentTab: 'exchange', // 当前显示的 Tab，默认为 "兑换"
    isExchangeSuccess: false, // 控制弹窗显示
    isExchanged: false, // 初始状态为未兑换
    exchangedItem: null, // 初始化为空
    userInfo: {},
    points: null,

  },
  attached() {
    console.log('抽屉式卡片-组件已挂载到页面');
    const userInfo = wx.getStorageSync('userInfo') || {};
    this.setData({
      userInfo: userInfo,
      points: userInfo.points
    });

    // console.log('查看积分：',userInfo.points);
    // 加载商品数据
    this.getProductList();
  },

  observers: {
    'userList': function (userList) {
      this.sortAndSetUserData(userList);
    },
    'iconList': function (iconList) {
      this.sortAndSetIconData(iconList);
    },
    'exchangeList': function (exchangeList) {
      this.sortExchangeListData(exchangeList);
    },
  },

  methods: {
    // 获取商品列表
    getProductList: async function () {
      console.log('正在获取商品列表...');
      try {
        const response = await apiService.wxRequestPromise({
          url: urlProductList,
          method: 'POST',
          header: {
            'content-type': 'application/x-www-form-urlencoded',
            'charset': 'UTF-8'
          },
        });
        // console.log('响应数据:', response); // 打印响应数据以便调试

        // 确保 response 是一个对象
        if (typeof response !== 'object' || response === null) {
          throw new Error('响应数据不是对象');
        }
        // 确保 response.code 是 0 且 response.rows 是一个数组
        if (response.code === 0 && Array.isArray(response.rows) && response.rows.length > 0) {
          this.setData({
            exchangeList: response.rows // 将后台返回的商品列表设置到组件的 exchangeList 中
          });
        } else {
          throw new Error('响应格式无效或请求失败');
        }
      } catch (error) {
        console.error('获取商品列表出错:', error);
        wx.showToast({
          title: '获取商品列表失败',
          icon: 'none',
        });
      }
    },
    // 排序并设置商品数据
    sortAndSetExchangeData: function (exchangeList) {
      if (!Array.isArray(exchangeList)) return;

      // 根据需要对商品列表进行排序，这里以商品的 pointsRequired 为例进行降序排序
      const sortedList = exchangeList.slice().sort((a, b) => b.pointsRequired - a.pointsRequired);

      // 更新排序后的商品列表到组件数据中
      this.setData({
        sortedexchangeList: sortedList
      });
    },
    // 排序并设置用户数据
    sortAndSetUserData(userList) {
      if (!Array.isArray(userList)) return;

      const sortedList = userList.slice().sort((a, b) => {
        if (b.energy === a.energy) return a.id - b.id;
        return b.energy - a.energy;
      });

      this.setData({
        topUsers: sortedList.slice(0, 3),
        otherUsers: sortedList.slice(3),
      });
    },
    // 排序并设置图标数据
    sortAndSetIconData(iconList) {
      if (!Array.isArray(iconList)) return;

      const sortedList = iconList.map(item => ({
        ...item,
        isAvailable: !!item.isAvailable, // 确保 isAvailable 是布尔值
      }));

      this.setData({
        sortedIconList: sortedList,
      });
    },
    sortExchangeListData(exchangeList) {
      if (!Array.isArray(exchangeList)) return;

      const sortedList = exchangeList.map(item => ({
        ...item,
        isAvailable: !!item.isAvailable, // 确保 isAvailable 是布尔值
      }));

      this.setData({
        sortedexchangeList: sortedList,
      });
    },

    // 兑换按钮点击事件
    handleExchange: function (e) {
      const id = e.currentTarget.dataset.id; 
      // 首先调用 getProductList 方法更新商品列表
      this.getProductList().then(() => {
        const item = this.data.exchangeList.find(el => el.productId === id); 
        // 检查是否找到了商品
        if (!item) {
          wx.showToast({
            title: '商品不存在',
            icon: 'none',
          });
          return; // 如果没有找到商品，直接返回
        }

        // 检查商品状态是否正常
        if (item.status !== 0) {
          wx.showToast({
            title: '商品已下架',
            icon: 'none',
          });
          return;
        }

        // 检查商品库存是否大于0
        if (item.stock <= 0) {
          wx.showToast({
            title: '已售罄',
            icon: 'none',
          });
          return;
        }

        // 检查用户积分是否足够
        if (this.data.points >= item.pointsRequired) {
          // 弹出确认兑换对话框
          wx.showModal({
            title: '确认兑换',
            content: `您即将使用 ${item.pointsRequired} 积分兑换 ${item.productName}，是否确认兑换？`,
            success: (res) => {
              if (res.confirm) {
                // 用户确认兑换
                const exchangeTime = item.pointsRequired;
                const newPoints = this.data.points - item.pointsRequired;
                const newStock = item.stock - 1;
                // console.log('更新积分和库存', newPoints, newStock);
                this.updatePoints(newPoints); // 更新用户积分
                this.updateStock(id, newStock); // 更新商品库存

                // 更新本地存储的 userInfo
                const updatedUserInfo = {
                  ...this.data.userInfo,
                  points: newPoints,
                };
                wx.setStorageSync("userInfo", updatedUserInfo);

                // 更新商品兑换列表
                const updatedList = this.data.exchangeList.map(el => {
                  if (el.productId === id) {
                    el.stock = newStock; // 更新库存
                  }
                  return el;
                });
                // 发送到后端的数据
                const RecordsData = {
                  userId: parseInt(userInfo.id, 10),
                  productId: id,
                  openid: userInfo.openid,
                  exchangePoints: exchangeTime,
                  createBy: userInfo.nickname
                };
                // console.log("[energy-ranking] 即将发送到后端的数据:", RecordsData);
                this.RecordsAdd(RecordsData);
                this.setData({
                  points: newPoints, // 更新用户积分
                  exchangeList: updatedList, // 更新兑换列表
                  exchangedItem: item, // 将兑换的物品数据传递给弹窗
                  isExchangeSuccess: true, // 显示兑换成功弹窗
                });
              } else if (res.cancel) {
                // 用户取消兑换，不进行任何操作
                console.log('用户取消兑换');
              }
            }
          });
        } else {
          wx.showToast({
            title: '积分不足',
            icon: 'none',
          });
        }
      }).catch(error => {
        console.error('获取商品列表出错:', error);
        wx.showToast({
          title: '获取商品列表失败',
          icon: 'none',
        });
      });
    },
    // 更新用户的积分
    updatePoints(newPoints) {
      // console.log("[energy-ranking]当前接受的newPoints:", newPoints);
      // const userInfo = wx.getStorageSync("userInfo") || {}; // 获取当前本地存储的 userInfo
      const userId = parseInt(userInfo.id, 10);
      if (!userId) {
        wx.showToast({
          title: '用户ID丢失，请重新登录',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      // 发送到后端的数据
      const dataToSend = {
        id: userId,
        points: newPoints
      };
      // console.log("[energy-ranking] 即将发送到后端的数据:", dataToSend);
      // 调用接口更新后端数据
      apiService.wxRequestPromise({
          url: urlWechatUserEdit.replace('{id}', userId),
          method: 'POST',
          data: dataToSend,
          header: {
            'content-type': 'application/x-www-form-urlencoded',
            'charset': 'UTF-8'
          },
        })
        .then(data => {
          // console.log("[energy-ranking] 请求成功，后端响应数据:", data);
          // 检查业务状态码
          if (data.code === 0) {
            // 更新本地存储的 userInfo
            // wx.setStorageSync("userInfo", updatedUserInfo);
            // console.log("[energy-ranking] 本地 userInfo 更新为:", updatedUserInfo);

            // wx.showToast({
            //   title: `您的积分当前剩余${newPoints}`,
            //   icon: 'success',
            //   duration: 2000
            // });
          } else {
            throw new Error(data.msg || '操作失败');
          }
        })
        .catch(err => {
          console.error("[energy-ranking] 请求失败，错误信息:", err);
          // 显示错误提示
          wx.showToast({
            title: err.message || '网络错误，请稍后再试',
            icon: 'none',
            duration: 2000
          });
        });
    },
    // 更新商品的库存
    updateStock(id, newStock) {
      // console.log("[energy-ranking]当前接受的id, newStock:", id, newStock);
      // 发送到后端的数据
      const dataToSend = {
        productId: id,
        stock: newStock
      };
      // console.log("[energy-ranking] 即将发送到后端的数据:", dataToSend);
      // 调用接口更新后端数据
      apiService.wxRequestPromise({
          url: urlProductEdit.replace('{productId}', id),
          method: 'POST',
          data: dataToSend,
          header: {
            'content-type': 'application/x-www-form-urlencoded',
            'charset': 'UTF-8'
          },
        })
        .then(data => {
          // console.log("[energy-ranking] 请求成功，后端响应数据:", data);
          // 检查业务状态码
          if (data.code === 0) {} else {
            throw new Error(data.msg || '操作失败');
          }
        })
        .catch(err => {
          console.error("[energy-ranking] 请求失败，错误信息:", err);
          // 显示错误提示
          wx.showToast({
            title: err.message || '网络错误，请稍后再试',
            icon: 'none',
            duration: 2000
          });
        });
    },
    //添加兑换记录
    RecordsAdd(RecordsData) {
      // console.log("[energy-ranking]当前接受的RecordsData:", RecordsData);
      // 调用接口更新后端数据
      apiService.wxRequestPromise({
          url: urlRecordsAdd,
          method: 'POST',
          data: RecordsData,
          header: {
            'content-type': 'application/x-www-form-urlencoded',
            'charset': 'UTF-8'
          },
        })
        .then(data => {
          // console.log("[energy-ranking] 请求成功，后端响应数据:", data);
          // 检查业务状态码
          if (data.code === 0) {} else {
            throw new Error(data.msg || '操作失败');
          }
        })
        .catch(err => {
          console.error("[energy-ranking] 请求失败，错误信息:", err);
          // 显示错误提示
          wx.showToast({
            title: err.message || '网络错误，请稍后再试',
            icon: 'none',
            duration: 2000
          });
        });
    },
    // 图标点击事件，显示弹出卡片
    handleIconClick(e) {
      const item = e.currentTarget.dataset.item;
      if (item && item.isAvailable) {
        this.setData({
          isCardVisible: true,
          selectedItem: item,
        });
        wx.setPageStyle({
          style: {
            overflow: 'hidden'
          }
        });
      } else {
        const message = `${item.name}功能暂未开放~`;
        wx.showToast({
          title: message,
          icon: 'none',
        });
      }
    },
    // 显示卡片
    showCard() {
      this.calculateScrollViewHeight(); // 调用方法计算并设置高度
      this.setData({
        isCardVisible: true,
      });
    },
    // 关闭弹出卡片
    closeCard() {
      this.setData({
        isCardVisible: false,
        selectedItem: null,
        exchangedItem: null, // 清空兑换物品
      });
      wx.setPageStyle({
        style: {
          overflow: 'auto'
        }
      });
    },
    // 切换 Tab
    switchTab(e) {
      const tab = e.currentTarget.dataset.tab;
      this.setData({
        currentTab: tab,
      });
    },
    closePopup() {
      this.setData({
        isExchangeSuccess: false, // 关闭弹窗
      });
    },
    // 关闭弹出卡片和弹窗
    // closePopup: function () {
    //   this.setData({
    //     isCardVisible: false,
    //     isExchangeSuccess: false, // 关闭兑换成功弹窗
    //     selectedItem: null,
    //     exchangedItem: null, // 清空兑换物品
    //   });
    //   wx.setPageStyle({
    //     style: {
    //       overflow: 'auto'
    //     }
    //   });
    // },
  },
});